<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"
           prefix="c" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Welcome to Spring Web MVC project</title>
        <script type="text/javascript" src="scripts/common.js"></script>

    </head>

    <style>
        .scrollTable150 {
            overflow-x: hidden;
            overflow-y: scroll;
            height: 200px;
        }
    </style>

    <script>
        function preFillTable() {
            var tbody = document.getElementById("myTBody");
            var nextEmptyRow = parseInt(document.getElementById("to").value) + 1;

            for(var i = nextEmptyRow; i < ${totalRow}; i++) {
                tbody.appendChild(document.createElement("tr"))
            }
        }

        <%--function newTR() {
            var tr = document.createElement("tr")
            tr.appendChild(document.createElement("td"))
            return tr;
        }--%>
    </script>

    <body onload="">
        <c:out value="${random}" />
        <p>Hello! This is the default welcome page for a Spring Web MVC project.</p>
        <p><i>To display a different welcome page for this project, modify</i>
            <tt>index.jsp</tt> <i>, or create your own welcome page then change
                the redirection in</i> <tt>redirect.jsp</tt> <i>to point to the new
                welcome page and also update the welcome-file setting in</i>
            <tt>web.xml</tt>.</p>

        <div id="myDiv" class="scrollTable150">
            <table id="myTable">
                <thead>
                    <tr>
                        <th>Element</th>
                    </tr>
                </thead>
                <tbody id="myTBody">
                    <c:forEach items="${list}" var="row">
                        <tr>
                            <td>${row}</td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>

        <input type="hidden" id="from" value="${from}"/>
        <input type="hidden" id="to" value="${to}"/>

    </body>

    <script>
        var http = createRequestObject();
        
        document.getElementById("myDiv").onscroll = tableScroll;
        
        function tableScroll() {
            sendRequest('GET','http://localhost:8084/MyWeb/index.htm')
        }

        function handleResponse(){
            if(http.readyState == 4 && http.status == 200){
                var response = http.responseText;
                if(response){

                    var json = eval("(" + response + ")");
                    var elems = json.elements;

                    var pTable = document.getElementById("myTable")

                    for(var i = 0; i < elems.length; i++) {
                        if(json.elements[i] != undefined) {
                            var row1 = pTable.insertRow(pTable.rows.length);
                            var cell1 =  row1.insertCell(0);
                            cell1.innerHTML = json.elements[i].elem;
                        }
                    }

        <%-- var trs = document.getElementById("myTBody").getElementsByTagName("tr");
         var from  = parseInt(document.getElementById("from").value) + 1

                        for(var i = 0; i < elems.length; i++) {
                            if(json.elements[i] != undefined) {
                                var td = document.createElement("td");
                                td.innerHTML = json.elements[i].elem
                                trs[i + from].appendChild(td);
                            }
                        }--%>
                                    }
                                }
                            }
       
                            function sendRequest(method, url){
                                if(method == 'get' || method == 'GET'){
                                    var from  = document.getElementById("from")
                                    var to  = document.getElementById("to")
                                    var range = parseInt(to.value - from.value);

                                    if(parseInt(to.value) < ${totalRow}) {

                                        range = range > (${totalRow} - parseInt(to.value)) ? ${totalRow} - parseInt(to.value) : range

                                        http.open(method,url);
                                        http.setRequestHeader("AJAX_REQUEST", "true");

                                        from.value = parseInt(from.value) + 1 +  range;
                                        to.value = parseInt(to.value) + 1 + range;

                                        http.setRequestHeader("FROM", from.value);
                                        http.setRequestHeader("TO", to.value);

                                        http.onreadystatechange = handleResponse;
                                        http.send(null);
                                    }
                                }
                            }
        
                            function createRequestObject(){
                                var req;
                                if(window.XMLHttpRequest){
                                    //For Firefox, Safari, Opera
                                    req = new XMLHttpRequest();
                                }
                                else if(window.ActiveXObject){
                                    //For IE 5+
                                    req = new ActiveXObject("Microsoft.XMLHTTP");
                                }
                                else{
                                    //Error for an old browser
                                    alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
                                }
            
                                return req;
                            }
    </script>

</html>
